import React from 'react';
import Image from 'next/image';
import { format, fromUnixTime } from 'date-fns';

interface ChatPromptProps {
  data: {
    icon: string;
    content: string;
    created_at?: number;
  };
}

const ChatPrompt: React.FC<ChatPromptProps> = ({ data }) => {
  const defaultAvatar = 'https://gravatar.com/avatar/a21644f154385c78278455e9404b9a52?s=400&d=robohash&r=x';
  const timestamp = data.created_at ? format(fromUnixTime(data.created_at), 'yyyy-MM-dd HH:mm:ss') : '';
  
  return (
    <>
      {timestamp && <div className="chat-timestamp">{timestamp}</div>}
      <div className="chat-prompt">
        <div className="chat-prompt-inner">
          <div className="chat-prompt-bubble">
            <p>{data.content}</p>
          </div>
          <Image src={data.icon || defaultAvatar} alt="User" width={32} height={32} className="chat-prompt-avatar" />
        </div>
      </div>
    </>
  );
};

export default ChatPrompt; 